<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/scrollBar.css" />

    <title>Xow</title>

    <style>
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            color: rgb(139, 142, 145);
        }
        
        #app {
            padding: 24px 0px 24px 24px;
            font-size: 14px;
        }
        
        .myCard {
            width: 18rem;
            display: inline-block;
            margin-right: 24px;
            margin-bottom: 16px;
            height: 300px;
            cursor: pointer;
            position: relative;
        }
        
        .cardContainer {
            margin-top: 10px;
            display: inline-block;
        }
        
        .cardContainer>.myCard:hover {
            box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 5px;
        }
        
        .detail {
            display: flex;
            flex-direction: column;
        }
        
        .nameRow {
            height: 20px;
            width: 100%;
            position: relative;
        }
        
        .name {
            /* 显示一行,超出隐藏 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: large;
            color: #000;
            width: 150px
        }
        
        .desc {
            height: 40px;
            /* 显示两行,超出隐藏 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            margin-top: 15px
        }
        
        .price {
            height: 30px;
            /* 显示一行,超出隐藏 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        
        .user {
            /* 显示一行,超出隐藏 */
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: relative;
        }
        
        .floatBar {
            height: 40px;
            position: fixed;
            top: 0px;
            left: 3px;
            border-radius: 10px;
            background-color: rgb(253, 253, 253);
            overflow: hidden;
            transition: height 0.1s;
            z-index: 2;
            width: 100%;
            padding: 0px 15px;
            padding-top: 10px;
        }
        
        .addItem {
            position: fixed;
            right: 10px;
            top: 5px;
            z-index: 3;
        }
        
        .itemClass {
            margin: 0px 0px;
            height: 25px;
            text-align: center;
            padding: 2px 0px;
        }
        
        .itemContainer {
            padding: 0px;
            margin: 0px;
            cursor: pointer;
            vertical-align: middle;
            text-align: center;
        }
        
        .itemContainer :hover {
            background-color: rgb(200, 22, 35);
            color: #fff;
            border-radius: 5px;
        }
        
        .itemImage {
            height: 100%
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="cardContainer" v-for="(item,index) in itemArr" :key="index">
            <div class="card myCard" @click="goToDetail(item)" v-if="selectLabel==''|| item.item_label==selectLabel">
                <div style="padding:0px;height:160px;overflow:hidden">
                    <img :src="imageUrl(item)" class="card-img-top itemImage" alt="商品图片" />
                </div>
                <div class="card-body">
                    <div class="nameRow">
                        <div class="name">
                            {{item.item_name}}
                        </div>
                    </div>
                    <div class="desc mt-7">{{item.item_desc}}</div>
                    <div class="price">
                        <div style="display: inline-block">
                            <i class="fa fa-jpy" style="color: rgb(248, 87, 76); font-size:
                                    22px"> </i>
                            <span style="color: rgb(253, 63, 49); font-size: 20px">
                                    {{item.item_price}}
                                </span>
                        </div>
                        <div style="display: inline-block; margin-left: 20px">
                            <del>
                                    <i class="fa fa-jpy" style="font-size: 14px"></i>
                                    <span style="font-size: 14px">{{item.item_price}}</span>
                                </del>
                        </div>

                        <div style="position:absolute;right:20px;bottom:5px;width:100px;text-align: right;">
                            分类:{{item.item_label}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="floatBar">
            <div v-if="showState">
                <div style="display: inline-block; padding: 0px 8px">分类</div>
                <div v-for="(name,index) in itemClass" :key="index" style="display:inline-block; margin-bottom: 6px">
                    <div class="itemContainer" @click="filterLabel(name)">
                        <div class="itemClass">
                            <span style="display: inline-block; padding: 0px 8px">{{name}}</span>
                        </div>
                    </div>
                </div>
                <span style="display: inline-block; cursor: pointer; padding: 0px 8px" @click="changeFloatBarHeight">收起</span>
            </div>
            <div v-else @click="changeFloatBarHeight">
                <span style="display: inline-block; cursor: pointer; padding: 2px 8px">展开</span>
            </div>
        </div>
    </div>

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
    <script src="../js/vue.global.js"></script>
    <!-- <script src="https://unpkg.com/vue"></script> -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/my-axios.js"></script>
    <script src="../layer/layer.js"></script>

    <script>
        const app = {
            data() {
                return {
                    itemArr: [],
                    itemClass: [
                        '全部',
                        '书籍',
                        '衣物',
                        '日常用品',
                        '电子产品',
                        '体育用品',
                        //'食品饮料',
                        '美妆护肤',
                        '其他',
                    ],
                    showState: true,
                    selectLabel: ''
                }
            },
            methods: {
                changeFloatBarHeight() {
                    this.showState = !this.showState
                },
                goToDetail(item) {
                    console.log(item)
                    window.location.href = 'detail.html?item_id=' + item.item_id
                },
                filterLabel(labelName) {
                    this.selectLabel = labelName == "全部" ? '' : labelName;
                },
                imageUrl(item) {
                    console.log(item.item_image);
                    if (item.item_image == undefined)
                        return "https://img0.baidu.com/it/u=2612811943,923465408&fm=26&fmt=auto&gp=0.jpg"
                    else
                        return "http://localhost:8080/xjw_war_exploded/item/avatar?filename=" + item.item_image;
                }
            },
            created() {
                myAxios
                    .get('/item/getAllItem', this.form)
                    .then((res) => {
                        layer.close(this.loadIdx)
                        if (!res.data.success) {
                            layer.msg(res.data.message, {
                                icon: 2,
                                time: 1500,
                            })
                        } else {
                            this.itemArr = res.data.data
                        }
                    })
                    .catch((err) => {
                        layer.close(this.loadIdx)
                        layer.msg('系统错误', {
                            icon: 2,
                            time: 1500,
                        })
                    })
            },
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>

</html>